#canvasId {
    position: absolute;
    bottom: 36px;
    /*background-color: #FFFFcc;*/

}
.content {
    position: absolute;
    width: 100%;
    top: -2px;/* background image has 2px transparent space !!! */
    bottom: 0;
    overflow: hidden;
}


.zuo {
    float: left;
    background: rgba(0,0,0,0.4);
    width: 80px;
    height: 80px;
    margin-top: 52%;
    padding-left: -56px;
    position: absolute;
    left: -46px;
    border-radius: 0 40px 40px 0;
}
.zuo img{
    position: absolute;
    left: 48px;
    top: 30px;
    width: 18px;
}

.you {
    float: right;
    background: rgba(0,0,0,0.4);
    width: 80px;
    height: 80px;
    margin-top: 52%;
    left: 92%;
    border-radius: 40px 0 0 40px;
    position: absolute;
}
.you img{
    position: absolute;
    top: 30px;
    width: 18px;
    left: 14px;
}

.yincang {
    display: none;
    z-index: 999;
}


.fojing_pic {
    float: left;
    height: 470px;
    width: 68%;
    /*background-color: #fff;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap-reverse;
    
}

.fojing_pic_add_btn_position {
    margin-left: 17%;
}

.fojing_pic_position {
    margin-left: 17%;
}

.words_backgroud {
    background: url(../img/write/demo1.png) no-repeat center;
    background-size: 100% 100%;
    padding-top: 18%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.icon > .icon{
    left: -100px;
} 

.show {
    background: rgba(0, 0, 0, 0.16); 
}

.word-frmame {
    width: 30%;
    height: 18%;
}

.word-position {
    visibility: visible;
    /* padding-right: 23px; */
    padding-right: 58px;
    padding-top: 20px;
    max-width: 78px;
    margin-left: 14%;
    /*max-width: 85px;*/
    max-height: 58px;
}

.btns {
    /*background-color: aqua;*/
    background: url(../img/rb.jpg) no-repeat center;
    background-size: 100% 100%;
    width: 100%;
    height: 17%;
    padding:3% 0 5% 0;
    position: fixed;
    bottom: 0;
    /*margin-top: 120%;*/
}
.btns li{
    width: 33%;
    text-align: center;
    float: left;
    padding: 10px;
    margin-left:-10px;
    position: relative;
    left: 20px;
}
.btns li img{
    width: 40%;
    height: auto;
    margin: 0 auto;
}

.write {
    position: absolute;
    width: 100%;
    top: 500px;
    bottom: 0;
    box-sizing: border-box;
}
.write_detail {
    position: absolute;
    top: 0;
    bottom: 36px;
    width: 100%;
    background-color: #cccccc;
}
.write_left {
    position: absolute;
    height: 100%;
    right: 50px;
    left: 0;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
}   
.write_left img {
    position: absolute;
    height: 80px;
    width: 80px;
    opacity: 0.7;
    left: 50%;
    top: 50%;
    margin: -40px;
}
.write_right {
    position: relative;
    height: 100%;
    width: 50px;
    float: right;
    background-color: #202f47;
}
.write_right_embg{
    background-color: #cccccc;
}
.tanchukuang{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50px;
    background-color: #202f47;
    text-align: center;
    z-index: 10;



    
}
.tanchukuang img{
    width: 30px;
    height: 30px;
}

.tanchukuang li{
    margin-top: 25px;
}
.tanchukuang p{
    font-size:14px;
    color: rgb(205, 179, 43);
    line-height: 14px;
}
.all_tin {
    position: absolute;
    height: 74px;
    width: 26px;
    top: 50%;
    left: 50%;
    margin: -37px -13px;
}
.tin {
    height: 26px;
    width: 26px;
}
.false {
    margin-top: 22px;
}
.bottom {
    position: absolute;
    height: 36px;
    width: 100%;
    bottom: 0;
}
.border_left {
    position: absolute;
    height: 100%;
    left: 0;
    right: 50px;
    font-family: "cong";
    font-size: 20px;
    padding-left: 15px;
    line-height: 36px;
    letter-spacing: 8px;
    background-color: #cccccc;
}
.core {
    position: absolute;
    height: 26px;
    width: 26px;
    left: 13px;
    top: 5px;
}
.border_right {
    position: relative;
    height: 100%;
    width: 50px;
    float: right;
}
.border_right img {
    position: absolute;
    height: 18px;
    width: 25px;
    margin: 9px 12.5px;
}

#mcover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 20000;
}
#mcover img {
    position: fixed;
    right: 18px;
    top: 5px;
    width: 260px!important;
    height: 180px!important;
    z-index: 20001;
}

@media screen and (min-width:1200px){
    .fojing_pic{
        height: 500px;
    }
    .write{
        top: 500px;
    }
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
    .fojing_pic{
        height: 500px;
    }
    .write{
        top: 500px;
    }
}

@media screen and (min-width: 768px) and (max-width: 959px) {
    .fojing_pic{
        height: 500px;
    }
    .write{
        top: 500px;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px){
    .fojing_pic{
        height: 400px;
    }
    .write{
        top: 400px;
    }
}
/*@media only screen and (max-width: 479px) {*/
    /*.fojing_pic{*/
        /*height: 380px;*/
    /*}*/
    /*.write{*/
        /*top: 380px;*/
    /*}*/
    /*.tanchukuang{*/
        /*margin-top: -57px*/
    /*}*/
/*}*/

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    .fojing_pic{
        height: 400px;
    }
    .write{
        top: 400px;
    }

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

    .fojing_pic{
        height: 400px;
    }
    .write{
        top: 400px;
    }

}
@media only screen and (-webkit-device-pixel-ratio:.75){
    .fojing_pic{
        height: 470px;
    }
}

/*@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){!* 兼容iphone6 *!*/

    /*.fojing_pic{*/
        /*height: 500px;*/
    /*}*/
    /*.write{*/
        /*top: 500px;*/
    /*}*/

/*}*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
    .fojing_pic{
        height: 470px;
    }
    .write {
        top: 430px;
    }
}


@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */

    .fojing_pic{
        height: 500px;
    }
    .write{
        top: 500px;
    }

}